<template>
	<view class="print">
	  <th-button :size="size" :type="type" :disabled="disabled" @click="printCode">
		<slot></slot>
	  </th-button>
  </view>
</template>

<script setup name="WifiPrintButton">
	import thButton from './th-button.vue';
	
	import tsc from '../gprint/tsc.js';
	import wifiPrint from "../gprint/WifiPrint.js";
	
	const props = defineProps({
	  type: {
		type: String,
	  },
	  border: {
		type: [Boolean, String],
		default: false,
	  },
	  disabled: {
		type: [Boolean, String],
		default: false,
	  },
	  size: {
		type: String,
	  },
	  data: {
		type: Array,
		default: () => {
		  return [];
		},
	  },
	  kind: {
		type: String,
	  },
	});
    
	const canPrint = ref(false);
	const loading = ref(false);
	const wifi = ref(null)

	const connectSocket = async (ip,port) => {
		if(loading.value) return;
		loading.value = true;
		wifi.value =await wifiPrint.checkWifi();
		loading.value = false;
		if(!wifi.value) return;
		
		const onConnect = await wifiPrint.connectWifi(ip, port);
		canPrint.value = onConnect;
		
		printCode()
	 }

	const printCode = () => {
	  if(!canPrint.value) {
		connectSocket("192.168.1.100",9100);
		return;
	  };
	  var command = tsc.createNew();
	  if(wifi.value === 'TP-LINK_B70F'){
		 command.setSize(85, 45);// 内贸 80 50 外贸 85 45 
		 command.setGap(4);
	  }else{
	     command.setSize(80, 50);
		 command.setGap(2);
	  }

	  command.setCls();
	  
	  props.data.forEach((data)=>{
		  command.setDirection(1);
		  command.setCodepage(936);
		 // 外贸
		 if(wifi.value === 'TP-LINK_B70F'){
			command.setText(140, 120, '9', 24, 24, `${data.invName}`);
			command.setText(140, 185, '9', 24, 24, `${data.invStd}`);
		 }else{
		 // 内贸
			command.setText(235, 140, '9', 24, 24, `${data.invName}`);
			command.setText(235, 190, '9', 24, 24, `${data.invStd}`);
		 }
		  
		  command.setPagePrint();
		  
		  wifiPrint.sendData(command.getData());
	  })
	  
	  canPrint.value = false;
    };
</script>

<style lang="scss" scoped>
.body {
  .tip {
    text-align: center;
    padding: 20rpx;
    font-size: 26rpx;
  }
}

.print{
  position:relative;
  .icon{
	  display: flex;
	  item-align:center;
	  color:#fff;
  }
  &:active{
	  background:rgba(0,0,0,0)
  }
  .list{
	  background:#fff;
	  position:absolute;
	  width:200rpx;
	  right:0;
	  top:100rpx;
	  border-radius:10rpx;
	  box-shadow: 0 0 10rpx 5rpx #f1f1f1;
	  view{
		  border-bottom:1rpx solid #f1f1f1;
		  &:last-child{
			  border:none;
		  }
	  }
  }

}
:deep(.wd-navbar__right--hover) {
  background: none!important;
}
</style>
